<script src="@/js/wenhua/wenhua.js"></script>

<template>

  <div class="wenhua">
    <div class="margins">

      <!-- 面包屑导航 -->
      <el-affix :offset="80">
        <div class="navigation">
          <Breadcrumb separator=">">
            <BreadcrumbItem to="/">
              <Icon type="ios-home" />
              首页
            </BreadcrumbItem>
            <BreadcrumbItem>
              <Icon type="md-pin" />
              文化
            </BreadcrumbItem>
          </Breadcrumb>
        </div>
      </el-affix>

      <!-- 分割线 -->
      <div class="divider">
        <el-divider />
      </div>

      <!-- 数据 -->
      <el-row :gutter="10">
        <el-col :span="6" v-for="item in wenhua" :key="item">
          <router-link :to="item.link">
            <el-card shadow="hover">
              <template #header>
                <div class="name">
                  <el-tag type="info">
                    <div class="tag">
                      {{ item.name }}
                    </div>
                  </el-tag>
                </div>
              </template>
              <div>
                <el-tooltip class="box-item" effect="dark" :enterable="false" placement="bottom" show-after="500">
                  <template #content>{{ item.introduce }}</template>
                  <img :src="item.img" />
                </el-tooltip>
              </div>
              <div class="more">
                <span>
                  了解更多→
                </span>
              </div>
            </el-card>
          </router-link>
        </el-col>
      </el-row>
    </div>
  </div>

</template>

<style lang="less" scoped src="@/css/wenhua/wenhua.scss"></style>
